<script setup lang="ts">
import type { IUserInfoResp } from '../me'

interface Props {
  userInfo?: IUserInfoResp
  loading?: boolean
  clickable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  clickable: true,
})

const emit = defineEmits<{
  click: []
}>()

// 默认头像
const defaultAvatar = '/static/images/default-avatar.png'

// 处理卡片点击
function handleCardClick() {
  if (props.clickable) {
    emit('click')
  }
}
</script>

<template>
  <view
    class="mx-4 my-4 rounded-xl bg-white p-4 shadow-sm"
    :class="{ 'active:bg-gray-50 transition-colors': clickable }"
    @tap="handleCardClick"
  >
    <!-- 加载状态 -->
    <view v-if="loading" class="flex items-center justify-center py-8">
      <sar-loading size="30rpx" type="clock" />
    </view>

    <!-- 用户信息内容 -->
    <view v-else-if="userInfo" class="space-y-2">
      <!-- 头像和基本信息 -->
      <view class="flex items-center space-x-4">
        <image
          :src="userInfo.avatar || defaultAvatar"
          class="h-16 w-16 rounded-full bg-gray-100"
          mode="aspectFill"
        />
        <view class="flex-1">
          <view class="text-lg text-gray-900 font-semibold">
            {{ userInfo.nickname || userInfo.username }}
          </view>
          <view class="mt-1 text-sm text-gray-500">
            @{{ userInfo.username }}
          </view>
          <view v-if="userInfo.deptName" class="mt-1 text-sm text-blue-600">
            {{ userInfo.deptName }}
          </view>
        </view>

        <!-- 右侧箭头（可点击时显示） -->
        <view v-if="clickable" class="i-carbon-chevron-right text-gray-400" />
      </view>
    </view>

    <!-- 无数据状态 -->
    <view v-else class="flex items-center justify-center py-8">
      <sar-empty description="暂无用户信息" />
    </view>
  </view>
</template>

<style scoped>
</style>
